<template>
  <CarSearch @submit="onData" />
  <div class="container">
    <el-card shadow="never" v-for="item in listData" :key="item.stage_id">
      <template #header>
        <div class="header">
          <div>
            {{ item.stage_name }} (<span class="num_color">{{ item.count }} </span>)
          </div>
          <div class="num_color">￥{{ item.amount }}</div>
        </div>
      </template>
      <el-scrollbar height="400px">
        <template v-if="item.list.length">
          <el-card  class="content_box" shadow="never" v-for="it in item.list" :key="it.id">
            <div class="content">
              <div class="header">
                <div>{{ it.name }}</div>
                <div>{{ it.belong_name }}</div>
              </div>
              <div class="goods">
                <div class="goods_left">
                  <span v-for="(product, index) in it.product_info" :key="product">{{ product }}<span v-if="index < 2"></span></span>
                  {{ `等${it.product_info.length}个产品` }}
                </div>
                <div class="rigth">{{ it.chat_status }}</div>
              </div>
              <div class="border"></div>
              <div class="info">
                <div>
                  <el-image :src="it.cust_info.avatar" fit="cover" class="el_image">
                    <template #error>
                      <el-icon><icon-picture /></el-icon>
                    </template>
                  </el-image>
                </div>
                <div class="user">
                  <div class="user_t">{{ it.cust_info.name }}</div>
                  <!-- <div class="user_n">暂无企业</div> -->
                  <div class="user_b">
                    <span>{{ it.cust_info.company || '暂无企业' }}</span>
                  </div>
                </div>
              </div>
              <div class="border"></div>
              <div class="bottom">
                <div>预计成交：{{ it.predict_time }}</div>
                <div class="num_color">￥{{ it.amount }}</div>
              </div>
            </div>
          </el-card>
          <div class="footer">已加载全部</div>
        </template>
        <el-empty v-else description="暂无商机" :image-size="130" />
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import CarSearch from './CarSearch.vue'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  import { ref, reactive } from 'vue'
  const listData = ref<any>([])
  const onData = (res: any) => {
    console.log('列表------流程', res)
    listData.value = res
  }
</script>

<style lang="scss" scoped>
  .container {
    display: grid;
    // grid-template-columns: repeat(5, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    // grid-template-columns: repeat(auto-fill, 300px);
    grid-gap: 20px;
    grid-gap: 20px;
    font-size: 14px;
    :deep(.el-card__header) {
      padding: 16px;
      font-size: 16px;
      font-family: STHeitiSC-Medium, STHeitiSC;
      font-weight: 500;
      color: #33302D;
    }
    :deep(.el-card__body) {
      padding: 12px;
      padding-right: 0;
    }
    .header {
      display: flex;
      justify-content: space-between;
    }
    .num_color {
      color: #ff5b05;
    }
    .text_color {
      font-size: 12px;
      color: #999;
    }
    .border {
      height: 1px;
      background-color: #e5e5e5;
    }
    .content_box {
      margin-bottom: 12px;
      margin-right: 12px;
      :deep(.el-card__body) {
        padding: 16px;
      }
      .content {
        display: grid;
        grid-template-rows: 17px 21px 1px 56px 15px;
        grid-gap: 8px;
        .goods {
          display: flex;
          justify-content: space-between;
          font-size: 10px;
          color: #999;

          .goods_left {
            // display: -webkit-box; //谷歌
            // -webkit-box-orient: vertical;
            // -webkit-line-clamp: 1; //显示几行
            // overflow: hidden;
          }
          .rigth {
            color: #f91313;
          }
        }
        .info {
          display: flex;
          align-items: center;
          grid-template-columns: 40px 1fr;
          grid-gap: 10px;
          .el_image {
            width: 40px;
            height: 40px;
            font-size: 40px;
            display: grid;
            place-content: center;
          }
          .user {
            display: grid;
            grid-template-rows: 15px 20px;
            grid-gap: 6px;
            font-size: 12px;

            .user_t {
              padding-top: 5px;
              color: rgb(5, 3, 3);
            }
            .user_n {
              color: #999;
            }
            .user_b {
              line-height: 20px;
              span {
                padding: 2px;
                color: #3dabff;
                background-color: #ebfaff;
              }
            }
          }
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          color: #999;
        }
      }
    }
    .footer {
      display: grid;
      place-content: center;
      font-size: 12px;
      color: #999;
    }
  }
</style>
